<template>
  <view class="template-box">
    <view class="bj">
      <image :src="image_host+'bj.png'"></image>
    </view>
    <view class="logo">
      <image :src="image_host+'log.png'"></image>
    </view>
    <view class="title">
      <image :src="image_host+'title.png'"></image>
    </view>
    <view class="xiangji">
      <image :src="image_host+'xiangji.png'"></image>
    </view>
    <view class="title2">
      <image :src="image_host+'title1.png'"></image>
    </view>
    <view class="gif">
      <image :src="image_host+'feiji.gif'"></image>
    </view>
    <!--    <view class="deng2">-->
    <!--      <image :src="image_host+'degn2.png'"></image>-->
    <!--    </view>-->
    <!--    <view class="cao1">-->
    <!--      <image :src="image_host+'cao1.png'"></image>-->
    <!--    </view>-->
    <!--    <view class="cao2">-->
    <!--      <image :src="image_host+'cao2.png'"></image>-->
    <!--    </view>-->
    <!--    <view class="title">-->
    <!--      <image :src="image_host+'title.png'"></image>-->
    <!--    </view>-->
    <view class="videoEnd" v-if="videoEnded" @click.stop="videoPlay">
      <image src="https://wechat-pictures-1301970825.file.myqcloud.com/pay.png"></image>
    </view>
    <view class="box1">
      <image v-if="type==='image'" :src="url" mode="aspectFill"></image>
      <video v-if="type==='video'" id="myVideo" @ended="videoEnded=true" :src="url" autoplay object-fit="cover"
             :controls="false"></video>
    </view>
  </view>
</template>

<script>
export default {
  props: ['info'],
  data() {
    return {
      image_host: this.image_host + 'template/1/',
      type: '',
      url: '',
      thumbUrl: '',
      videoEnded: false
    };
  },
  created() {
    this.type = this.info.fileType
    this.url = this.info.url
    this.thumbUrl = this.info.thumbUrl
    console.log(this.info)
  },
  methods: {
    update({type, url, thumbUrl}) {
      this.type = type
      this.url = url
      this.thumbUrl = thumbUrl
    },
    videoPlay() {
      uni.createVideoContext('myVideo', this).play()
      this.videoEnded = false
    }
  },

}
</script>

<style lang="scss" scoped>
@function tovmin($rpx) { //$rpx为需要转换的字号
  @return #{$rpx * 100 / 750}vmin;
}

image {
  width: 100%;
  height: 100%;
}

.template-box {
  width: 750upx;
  height: 1448upx;
  position: relative;

  .bj {
    position: absolute;
    width: 750upx;
    height: 1448upx;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .box1 {
    width: 700upx;
    height: 850upx;
    position: absolute;
    top: 56%;
    left: 50%;
    background-color: #F2DEC9;
    transform: translate(-50%, -50%);
    border-radius: 20upx;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 19upx 19upx 66upx 19upx;
  }

  .logo {
    width: tovmin(292);
    height: tovmin(78);
    position: absolute;
    top: tovmin(39);
    left: tovmin(52);
  }

  .logo, .deng, .deng2, .cao1, .cao2, .title, .title2 {
    z-index: 3;
  }

  .deng {
    width: 130upx;
    height: 182upx;
    position: absolute;
    top: 198upx;
    left: 473upx;
    animation-name: rock;
    animation-duration: .7s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: top;
  }

  .deng2 {
    width: 182upx;
    height: 306upx;
    position: absolute;
    top: 184upx;
    left: 568upx;
    animation-name: rock;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 50% 3%;
  }

  .cao1 {
    width: 132upx;
    height: 124upx;
    position: absolute;
    top: 983upx;
    left: 102upx;
    animation-name: rockcao;
    animation-duration: .6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: bottom left;
  }

  .cao2 {
    width: 190upx;
    height: 286upx;
    position: absolute;
    top: 857upx;
    left: 23upx;
    animation-name: rockcao2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: bottom left;
  }

  .title {
    width: 676upx;
    height: 253upx;
    position: absolute;
    left: 12upx;
    top: 112upx;
    animation-name: title;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 4;
  }

  .title2 {
    width: 221upx;
    height: 614upx;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .gif {
    width: 392upx;
    height: 322upx;
    position: absolute;
    bottom: 100upx;
    right: 79upx;
    z-index: 3;
  }

  @keyframes title {
    0% {
      transform: rotate(3deg) scale(1);
    }
    //50% {
    //  transform: rotate(0deg) scale(1.05);
    //}
    100% {
      transform: rotate(-3deg) scale(1.1);
    }
  }

  @keyframes rockcao {
    0% {
      transform: rotate(5deg);
    }
    100% {
      transform: rotate(-5deg);
    }
  }
  @keyframes rockcao2 {
    0% {
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(4deg);
    }
  }
  @keyframes rock {
    0% {
      transform: rotate(10deg);
    }
    100% {
      transform: rotate(-10deg);
    }
  }
}

video {
  width: 100%;
  height: 100%;
}

.xiangji {
  width: 302upx;
  height: 431upx;
  position: absolute;
  top: 21upx;
  right: 0;
  z-index: 3;
}
</style>
